<ui:composition template="/WEB-INF/templates/showcase.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:o="http://omnifaces.org/ui"
	xmlns:of="http://omnifaces.org/functions"
>
	<ui:define name="description">
		<p>
			Collection of EL functions for date and time: <code>of:formatDate()</code>, <code>of:formatDateWithTimezone()</code>,  
			<code>of:addXxx()</code> like <code>of:addDays()</code>, <code>of:xxxBetween()</code> like <code>of:daysBetween()</code>,   
			<code>of:getMonths()</code>, <code>of:getShortMonths()</code>, <code>of:getDaysOfWeek()</code>, <code>of:getShortDaysOfWeek()</code>,
			<code>of:getMonth()</code>, <code>of:getShortMonth()</code>, <code>of:getDayOfWeek()</code> and <code>of:getShortDayOfWeek()</code>.
		</p>
		<ui:include src="/WEB-INF/includes/utils/feature-request.xhtml" />
	</ui:define>		
	
	<ui:define name="demo">
		<f:view locale="#{localeManager.language}">
			<p>
				Format current date with system default timezone:
				#{of:formatDate(now, 'yyyy-MM-dd HH:mm:ss z')}
			</p>
			<p>
				Format current date with GMT timezone:
				#{of:formatDateWithTimezone(now, 'yyyy-MM-dd HH:mm:ss', 'GMT')}
			</p>
			<p>
				<c:set var="threeMonthsLater" value="#{of:addMonths(now, 3)}" scope="request" />
				Add 3 months to today and format it with system default timezone: 
				#{of:formatDate(threeMonthsLater, 'yyyy-MM-dd HH:mm:ss z')}
			</p>
			<p>
				Count months between the date representing "now" and the date representing "3 months later": 
				#{of:monthsBetween(now, threeMonthsLater)} months
			</p>
			
			<hr />

			<p>
				<h:panelGroup id="month">
					Chosen month number:
					<strong>#{functionsBean.month}</strong>
					- Name:
					<strong>#{of:getMonth(functionsBean.month)}</strong>
					- Short name:
					<strong>#{of:getShortMonth(functionsBean.month)}</strong>
				</h:panelGroup>
			</p>
			<p>
				<h:panelGroup id="dayOfWeek">
					Chosen day of week number:
					<strong>#{functionsBean.dayOfWeek}</strong>
					- Name:
					<strong>#{of:getDayOfWeek(functionsBean.dayOfWeek)}</strong>
					- Short name:
					<strong>#{of:getShortDayOfWeek(functionsBean.dayOfWeek)}</strong>
				</h:panelGroup>
			</p>

			<h:form>
				<p>
					Get all months for the current locale:
					<h:selectOneMenu value="#{functionsBean.month}">
						<f:selectItems value="#{of:getMonths()}" />
						<f:ajax render=":month" />
					</h:selectOneMenu>
				</p>
				<p>
					Get all short months for the current locale:
					<h:selectOneMenu value="#{functionsBean.month}">
						<f:selectItems value="#{of:getShortMonths()}" />
						<f:ajax render=":month" />
					</h:selectOneMenu>
				</p>
				<p>
					Get all days of week for the current locale:
					<h:selectOneMenu value="#{functionsBean.dayOfWeek}">
						<f:selectItems value="#{of:getDaysOfWeek()}" />
						<f:ajax render=":dayOfWeek" />
					</h:selectOneMenu>
				</p>
				<p>
					Get all short days of week for the current locale:
					<h:selectOneMenu value="#{functionsBean.dayOfWeek}">
						<f:selectItems value="#{of:getShortDaysOfWeek()}" />
						<f:ajax render=":dayOfWeek" />
					</h:selectOneMenu>
				</p>
				<p>
					Switch locale and see month and day of week names changing:
					<h:selectOneMenu value="#{localeManager.language}">
						<f:selectItem itemValue="en" itemLabel="English" />
						<f:selectItem itemValue="es" itemLabel="Español (Spanish)" />
						<f:selectItem itemValue="fr" itemLabel="Français (French)" />
						<f:selectItem itemValue="de" itemLabel="Deutsch (German)" />
						<f:selectItem itemValue="nl" itemLabel="Nederlands (Dutch)" />
						<f:selectItem itemValue="ar" itemLabel="العربية (Arabic)" />
						<f:selectItem itemValue="he" itemLabel="עִבְרִית (Hebrew)" />
						<f:selectItem itemValue="zh" itemLabel="汉语 (Chinese)" />
						<f:ajax render=":demo" />
					</h:selectOneMenu>
				</p>
			</h:form>
		</f:view>
	</ui:define>
</ui:composition>